<template>
	<view class="repair-wrap">
		<view style="border-top: 1px solid #F7F8F9;background-color: #FFFFFF;padding-bottom: 24px;" >
			
			<view style="width: 95%;margin: 25px auto;padding: 0 20px;">
				<h3>选择分类</h3>
				<view class="repair-box u-p-40 u-p-l-30 u-p-r-30" >
					<view  style="display: flex;">
						<button class="button" :style="ruleFrom.type_classification == 1?'background-color: rgb(69 124 5 / 33%)':null" @click="ruleFrom.type_classification = 1">报事</button>
						<button class="button" :style="ruleFrom.type_classification == 2?'background-color: rgb(69 124 5 / 33%)':null" @click="ruleFrom.type_classification = 2">公共报修</button>
						<button class="button" :style="ruleFrom.type_classification == 3?'background-color: rgb(69 124 5 / 33%)':null" @click="ruleFrom.type_classification = 3">心情</button>
					</view>
					<view style="width: 95%;margin: 25px auto;">
						<view class='guar-text'>
							<textarea maxlength='-1' v-model="ruleFrom.photo_remarks" type="textarea" placeholder="请说明详情" />
							</view>
					</view>
				 </view>
				
					<view class="header-li">
						<view style="width: 98px;">
							<h3 style="margin-top: -8px;">位置</h3>
						</view>
						<view class="input1">
							<u-input @click="positionFun" disabled placeholder="请输入位置" v-model="ruleFrom.building_location" />
						</view>
					</view>
					<view class="header-li">
						<view style="width: 98px;">
							<h3>地图定位</h3>
						</view>
					</view>
					<map style="width: 100%; height: 300px;"
						:latitude="latitude" 
						:longitude="longitude" 
						:markers="covers">
					</map>
					<view class="header-li">
						<view style="width: 98px;">
							<h3>隐私</h3>
						</view>
						<picker :value="index" @change="classificationBtn" :range="classification" range-key="name" mode="selector">
							<view class="form-select">{{classification[index].name}}</view>
						</picker>
					</view>
					<view class="header-li">
						<view style="width: 98px;">
							<h3>上传图片</h3>
						</view>
					</view>
					<view class="guarn-box guarn-box2 u-m-t-20" v-if="imgArr.length>0">
						<view class="guarn-box2-img" v-for="(item,index) in imgArr" style="display: flex;">
								<image :src="item" ></image>
								<u-icon @click="colseImg(item)" name="close" color="red" size="40" class="guarn-box2-img-close"></u-icon>
							</view>
					</view>
					
				</view>
				<view class="guarn-box u-m-t-20" style="margin-left: 37px;">
					<view @click="uoloadHouse" class="guarn-box-img">
						<image class="u-m-t-72" src="../../static/image/camera.svg" mode=""></image>
					</view>
				</view>
				
				
			</view>
			<view style="margin-top: 30px;padding-bottom: 20px;">
				<button class="yilingqu">提交</button>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	export default {
		data() {
			return {
				type:1,
				index:0,
				array:['分类','分类二'],
				inday:0,
				ruleForm:{
					renType:null,
				},
				indexList:true,
				ruleFrom:{
					building_location:null,//楼宇位置
					positioning_position:null,//地图定位位置
					photo_remarks:null,//备注
					first_photo:null,//第一张照片
					second_photo:null,//第二张照片
					the_third_photo:null,//第三张照片
					type_classification:null,//类型分类:1、报事，2、公区报修，3、心情
					privacy_classification:null,//隐私分类:1、公开，2、匿名发布，3、问题隐私、4、个人信息隐私，5、私发物业处理
					user_id:null,
				},
				imgArr:[],//上传照片
				classification:[
					{
						id: 1,
						name: '公开',
					},
					{
						id: 2,
						name: '匿名发布',
					},
					{
						id: 3,
						name: '问题隐私',
					},
					{
						id: 4,
						name: '个人信息隐私',
					},
					{
						id: 5,
						name: '私发物业处理',
					},
					{
						id: 6,
						name: '需要物业公司处理',
					},
				],
				//地图
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					id:1,
					width:100,
					height:100,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath:'/static/index/tbdw.png'
				}],
				addressName:'',
			}
		},
		mounted() {
			//默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标
			uni.getLocation({
				type: 'gcj02',
				success: (res)=>{
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					this.covers[0].latitude = res.latitude;
					this.covers[0].longitude = res.longitude;
				}
			});
			
		},
		methods: {
			positionFun(){
				uni.chooseLocation({
					success:(res)=> {
						console.log('位置名称: ' + res.name);
						console.log('详细地址: ' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						this.ruleFrom.building_location = res.address;
						this.covers[0].latitude = res.latitude;
						this.covers[0].longitude = res.longitude;
						//this.addMarkers();
					}
				});
			},
			addMarkers(){
				this._mapContext = uni.createMapContext("map", this);
				
			},
			colseImg(val){
				if(val){
					let imgArr = this.imgArr;
					this.imgArr = [];
					for(let i=0;i<imgArr.length;i++){
						if(imgArr[i] != val){
							this.imgArr.push(imgArr[i]);
						}
					}
				}
			},
			// 选择图片
			uoloadHouse() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 9, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.imgArr.push(res.data.data);
											// _this.ruleForm.indoor_images = res.data.data
											_this.imgFlag=false;
										})
									})
								}
			
							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.imgArr.push(res.data.data);
											// _this.ruleForm.indoor_images = res.data.data
											_this.imgFlag=false;
										})
									})
								}
			
							});
						}
					},
					fail: function(res) {}
				});
			},
			//隐私分类选择
			classificationBtn:function(e){
				this.index = e.target.value
				this.ruleFrom.privacy_classification = this.classification[this.index].id
			},
			checked(index) {
				this.isActive = index
			},
			newly() {
				uni.navigateTo({
					url: '/pages/clap/homepageClap'
				})
			},
			shouList(){
				this.indexList =! this.indexList
			},
		}
	}
</script>


<style lang="scss">
	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}
	.clap_box{
		width: 95%;
		margin: 0 auto;
	}
	.clap_box_img{
		width: 100%;
		margin-top: 24px;
		height: 131px;
	}
	.guar-text textarea {
		border-radius: 8px;
		// width: 345px;
		height: 120px;
		background: #F2F3F5;
		padding: 16rpx 20rpx !important;
		box-sizing: border-box;
	}
	.clap_box_imgtow{
		position: absolute;
		    top: 69px;
		    right: 164px
	}
	.tab_nav{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tab_nav  .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}
	.active {
		position: relative;
		color: #F9A832 ;
	}
	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: #F9A832 ;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
	.button{
		width: 29%;
		border-radius: 33px;
		line-height: 26px;
		border: 1px solid #CCCCCC;
		font-size: 14px;
	}

	.header-li {
		display: flex;
		// align-items: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 102rpx;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}
	
	.header-name {
		width: 186rpx;
	}
	.form-select {
		width: 480rpx;
		background: url(../../static/image/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}
	.yilingqu {
		width: 80%;
		height: 84rpx;
		// background: #F9A832;
		background: linear-gradient(180deg, #76D904 0%,#417505 100%);
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}
	.guarn-box{
		width: 100%;
		height: 216rpx;
	}
	.guarn-box2{
		display: flex;
	}
	.guarn-box2-img{
		width:216rpx;
		height: 216rpx;
		margin-right: 20rpx;
		position: relative;
		.guarn-box2-img-close{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}
	.guarn-box2 image{
		width:216rpx;
		height: 216rpx;
	}
	
	.guarn-box-img{
		width: 216rpx;
		height: 216rpx;
		float: left;
		margin-right: 24rpx;
		text-align: center;
		border: 2rpx solid #ccc;
		border-radius: 4rpx;
	}
	.guarn-box-img image{
		width: 76rpx;
		height: 68rpx;
	}
	.guarn-box-txt{
		width: 420rpx;
		height: 216rpx;
		color: #999;
		float: left;
	}
	.guar-txt-time{
		float: right;
		text-align: right;
		width: 420rpx;
	}
	
</style>
